<template>
  <div class="box">
    <div class="user">
      <div class="userinfo" v-for="item in 4" :key="item">
        <div class="userhead">
          <img src="@/assets/image/demo.jpg" alt="" /><span>郝momo</span>
        </div>
        <div class="videobox">
          <!-- 这里打算只放之五个视频 -->
          <div class="videoin" v-for="item in 5" :key="item">
            <div class="videopic"></div>
            <div class="videoinfo">郝momo</div>
          </div>
           <div class="takemore">此处获取更多视频</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style scoped>
.user {
  width: 100%;
  position: absolute;
  height: calc(100% - 150px);
  position: absolute;
  top: 150px;
}

.userinfo {
  width: 100%;
  height: 200px;
  margin: 50px 0;
  border-bottom: 1px solid whie;
}

.userhead {
  width: 200px;
  height: 50px;
  font-size: 20px;
  margin-left:20px ;
}

.userhead img {
  width: 50px;
  height: 50px;
    margin-left:20px ;
}
.videobox{
  width: 100%;
  height: 175px;
  display: flex;

  padding-top: 25px;
  margin-bottom:25px ;
      overflow-x: scroll;
      border-bottom: 1px solid gainsboro;

      
}
::-webkit-scrollbar {
  display: none;
}
.videoin{
  width:200px;
  height: 160px;
  background-color: red;
  position: relative;
    margin:0 50px;
}
.videopic{
  width: 200px;
  height: 120px;
  background-color: blue;
}

.takemore{
  width: 100px;
  height: 160px;
  background: linear-gradient(90deg,white ,black);
  position: absolute;
  right: 0px;
    writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  line-height: 50px;
  color: white;
  cursor: pointer;
}
.takemore:hover{
color: yellow;
}



</style>